<template>
  <div class="d1">
    <div id="ddd1" class="d2">
      <!-- 你看到的地图 -->
      <dlqmap v-if="map"></dlqmap>
      <!-- 你看到的概览 -->
      <overview v-if="overview" :run="overview"></overview>
    </div>

    <div class="a1" :style="{ left: offsetwidth - 265 + 'px' }">
      <div
        type="primary"
        class="btn"
        :class="{ active1: overview }"
        style="margin-left: 15px"
        @click="clickMap"
      >
        沈 阳 地 图
      </div>
      <!--
      <div
        type="primary"
        class="btn"
        :class="{ active1: overview }" map
        style="margin-left: 15px"
        @click="clickOverview"
      >
        概 览
      </div>
      -->
    </div>
  </div>
</template>

<script>
import dlqmap from "../map/index1_1";
import overview from "../overview/index_1";

export default {
  name: "dashboard",

  data() {
    return {
      activeName2: "first",
      offsetwidth: document.documentElement.clientWidth,
      run: false,
      // offsetheight : document.documentElement.clientHeight - 150,

      map: true,
      overview: false,
    };
  },

  props: {},

  components: {
    dlqmap,
    overview,
  },

  computed: {},

  methods: {
    clickOverview() {
      this.overview = true;
      this.map = false;
    },
    clickMap() {
      this.overview = false;
      this.map = true;
      this.$router.go(0);
    },
  },

  watch: {
    activeName2(ret) {
      if (ret === "second") {
        this.run = true;
      } else {
        this.run = false;
      }
    },
  },

  mounted() {},
};
</script>

<style scoped>
.a1 {
  position: absolute;
  z-index: 999;
  width: 215px;
  top: 110px;
  /*left: 655px;*/
}

.d1 {
  /*width: 1850px;*/
  /*height: 940px;*/
  background: rgba(8, 55, 73, 0.7);
  padding: 15px;
}

.d2 {
  /*width: 1850px;*/
  /*height: 940px;*/
  overflow: hidden;

  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
}

.btn {
  width: 100px;
  height: 37px;
  background: rgba(39, 206, 191, 1);
  float: left;
  text-align: center;
  color: #fff;
  padding-top: 13px;
  cursor: pointer;
}
.active1 {
  width: 100px;
  height: 37px;
  background: rgba(10, 137, 145, 1);
}
</style>
